<template>
  <a-modal
    title="流程审批信息"
    :visible="visible"
    centered
    @ok="handleCancel"
    @cancel="handleCancel" 
    width="80%"
  >
    <div class="process-engine" style="width:100%;" v-if="!!processInstanceId">
      <ht-approval
        ref="childrenRef"
        :process-instance-id="processInstanceId"
        :options="options"
        :custom="custom"
        :history-dialog="historyDialog"
        :message-id="messageId"
        :hidden-task-def-key="hiddenTaskDefKey">
      </ht-approval>
    </div>
    <template slot="footer">
      <a-button type="primary" @click="visible = false">关闭</a-button>
    </template>
  </a-modal>
</template>
<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN,USER_NAME } from "@/store/mutation-types"
export default {
  components: {
    'htApproval': () => import('@/config/ht-approval.umd.min.js'),
  },
  name: 'ProcessInfoModal',
  props:{
    processInstanceId:{
      type:String,
      default:null,
    },
  },
  data() {
    return {
      visible:false,
      userinfo:{
        info:this.$store.getters.userInfo,
        module:'approval',
      },
      options: {
        request: {
          baseUrl: this.API_BASE_URL,   // 业务系统根路径
          timeOut: 5000,  // 请求超时时间
          interceptors: (config) => {
            config.headers['X-Access-Token']=Vue.ls.get(ACCESS_TOKEN)
            return config
          }
        },
        userId: Vue.ls.get(USER_NAME)
      },
      messageId: '',          // 工作台URL里面的msgId参数
      custom: {},
      historyDialog: {
        // 审批历史模态框属性
      },
      hiddenTaskDefKey:"submit",
    };
  },
  methods: {
    show(){
      this.visible=true;
    },
    handleCancel(){
      this.visible=false;
    }
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary{
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected{
  display: none;
}
/deep/ .ant-modal-content{
  border-radius: 15px;
}
/deep/ .ant-modal-title,/deep/ .ant-modal-footer{
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary{
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header{
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%,#1158c9 100%);
}
/deep/ .ant-modal-title{
  color: #fff;
}
.process-engine {
  /deep/ #process-container {
    width: unset !important;
  }
  /deep/ #process-container .process-item .info-fullMessage {
    max-width: 1200px;
  }
}
</style>